
<html>
<head>
   <meta  charset="UTF-8">
    <title>学生信息</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>



<input name="sname" id="sname">
<input type="button" value="查询" id="btnfind">

<table class="table">
    <thead>
    <tr>
        <td>学号</td>        <td>姓名</td>        <td>性别</td>
        <td>年龄</td>       <td>图片</td>        <td>选课信息</td>
    </tr> </thead>

    <tbody id="disstu">
    </tbody>
</table>
<input type="button" value="查看更多" id="btnmore">
</body>

<script>
    var pageNo=1;
    $(function () {
        $("#btnfind").click(function () {
            $("#disstu").html("");
            $("#btnmore").val("查看更多");
            $("#btnmore").prop("disabled",false);
            var sname=$("#sname").val();
            pageNo=1;
            getStu(sname,pageNo)
        });

        $("#btnmore").click(function () {
            var sname=$("#sname").val();
            pageNo=pageNo+1;
            getStu(sname,pageNo)
        });

         getStu("",1);
    });

   function  display(id) {
       $("tr[name^='sc'][name!='sc"+id+"']").css("display","none");
       var d=$("tr[name='sc"+id+"']").css("display");
        if( d=="none")
            $("tr[name='sc"+id+"']").css("display","");
        else
            $("tr[name='sc"+id+"']").css("display","none");

   }

    function  getStu(sname,pageNo) {
         $.ajax({
             // url:"${pageContext.servletContext.contextPath}/stu/json",
             url:"stu/json",
             data:{sname:sname,pageNo:pageNo},
             success:function (res) {
                 if(res.length==0){
                     $("#btnmore").val("没有更多了");
                     $("#btnmore").prop("disabled",true);
                     return;
                 }
                 var s=""
                 for (var i=0;i<res.length;i++){
                     var sc=res[i].listSc;
                     s=s+"<tr><td>"+res[i].sid+"</td>";
                     s=s+"<td>"+res[i].sname+"</td>";
                     s=s+"<td>"+res[i].ssex+"</td>";
                     s=s+"<td>"+res[i].sage+"</td>";
                     s=s+"<td>  <img src='${pageContext.servletContext.contextPath}/static/upimgs/"+res[i].sid+"_.png' width='50px' height='50px'></td>";
                     if(sc.length!=0)
                     s=s+"<td>  <a href='javascript:void(0)' onclick='display("+res[i].sid+")' >详情</a> </td> ";
                     else
                         s=s+"<td> 未选课 </td> ";

                     s=s+"</tr>";
                     //选课信息
                     if(sc.length!=0) {
                         s = s + "<tr name='sc" + res[i].sid + "' class='success'  style='display:none;font-size: 12px;color: red;'>";
                         s=s+"<td colspan='2'>课程号</td><td  colspan='2'>课程名</td><td colspan='2'>成绩</td><tr>";
                         for (var j = 0; j < sc.length; j++) {
                             s = s + "<tr  name='sc" + res[i].sid + "'  style='display:none;font-size: 12px;color: darkcyan'  class='warning'>";
                             s=s+"<td colspan='2'>" + sc[j].cid + "</td><td  colspan='2'>" + sc[j].cname + "</td><td colspan='2'>" + sc[j].score + "</td></tr>";
                         }
                     }

                 }
                 $("#disstu").append(s);
             }
         })
    }

</script>

</html>
